<template>
  <div class="component-upload-image">
    <el-upload
        ref="imageUpload"
        :action="uploadImgUrl"
        :before-upload="handleBeforeUpload"
        :class="{hide: this.fileList.length >= this.limit}"
        :file-list="fileList"
        :headers="headers"
        :on-error="handleUploadError"
        :on-exceed="handleExceed"
        :on-remove="handleDelete"
        :on-success="handleUploadSuccess"
        :show-file-list="true"
        multiple
    >
      <el-button size="mini" type="primary"><i class="el-icon-upload el-icon&#45;&#45;right"/>上传</el-button>
      <!--      <i class="el-icon-plus"></i>-->
    </el-upload>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import ModelList from '../../components/topo/model'

export default {
  components: {
    ModelList
  },
  props: {
    value: [String, Object, Array],
    // 文件数量限制
    limit: {
      type: Number,
      default: 5,
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    },
    moduleName: {
      default: "3D模型",
      type: String
    },
    moduleGuid: {
      default: "123456789",
      type: String
    },
  },
  data() {
    return {
      number: 0,
      uploadList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/zutai/upload/uploadData" + "?isMultiple=true", // 上传的文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      fileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptIdStrs: null,
        moduleName: "",
        moduleGuid: "",
        resourceUrl: null,
        orderByColumn: "id",
        isAsc: "desc"
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.uploadImgUrl = this.uploadImgUrl + "&moduleGuid=" + this.moduleGuid + "&moduleName=" + this.moduleName
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  methods: {
    // 上传前loading加载
    handleBeforeUpload(file) {
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({name: res.fileName, url: this.baseUrl + res.fileName});
        this.uploadedSuccessfully();
      } else {
        this.number--;
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.imageUpload.handleRemove(file);
        this.uploadedSuccessfully();
      }
    },
    // 删除文件
    handleDelete(file) {
      const findex = this.fileList.map(f => f.name).indexOf(file.name);
      if (findex > -1) {
        this.fileList.splice(findex, 1);
        this.$emit("input", this.listToString(this.fileList));
      }
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading();
    },
    // 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.$modal.closeLoading();
      }
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        if (list[i].url) {
          strs += list[i].url.replace(this.baseUrl, "") + separator;
        }
      }
      return strs != '' ? strs.substr(0, strs.length - 1) : '';
    }
  }
};
</script>
<style lang="scss" scoped>
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
  display: none;
}

// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
  transition: all 0s;
}

::v-deep .el-list-enter,
::v-deep .el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}


::v-deep .el-upload-list__item img {
  object-fit: cover;
}
</style>

